import React, { useState } from "react";
import { Breadcrumb, Button } from "antd";

// ReactQuill是富文本编辑器组件
import ReactQuill from "react-quill";
// 引入对应的css
import "react-quill/dist/quill.snow.css";

const modules = {
  toolbar: [
    [{ header: [1, 2, false] }],
    ["bold", "italic", "underline", "strike", "blockquote"],
    [
      { list: "ordered" },
      { list: "bullet" },
      { indent: "-1" },
      { indent: "+1" },
    ],
    ["link", "image"],
    ["clean"],
  ],
};

const Index = () => {
  const [value, setValue] = useState("");

  const submit = () => {
    console.log(value);
  };

  return (
    <div>
      <Breadcrumb
        style={{ marginBottom: 20 }}
        items={[
          {
            title: "编辑器",
          },
          {
            title: "富文本编辑器",
          },
        ]}
      />

      <ReactQuill
        theme="snow"
        value={value}
        onChange={setValue}
        modules={modules}
      />

      <Button onClick={submit}>发布</Button>

      <div>{value}</div>

      <h3>展示的效果</h3>
      <div dangerouslySetInnerHTML={{ __html: value }}></div>
    </div>
  );
};

export default Index;
